<template>
  <div class="home">
    <div class="body">
      <div class="typeCategory">
        <MKTypeCategory
          ref="MKTypeCategory"
          :data="typeCategoryData"
          v-if="typeCategoryData"
        />
      </div>
      <div class="contentBox">
        <div class="langCategory">
          <MKLangCategory
            ref="MKLangCategory"
            :data="langCategoryData"
            v-if="langCategoryData"
          />
        </div>
        <div class="movieList">
          <MKMovieList />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MKTypeCategory from "@/components/TypeCategory";
import MKLangCategory from "@/components/LangCategory";
import MKMovieList from "@/components/MovieList";
export default {
  components: {
    MKTypeCategory,
    MKLangCategory,
    MKMovieList
  },
  data() {
    return {
      typeCategoryData: false,
      langCategoryData: false
    };
  },
  created() {
    // window.android.setMoiveStatus("1");
    this.categoryLoading();
  },
  methods: {
    categoryLoading() {
      this.$api.categoryLoading(this);
    },
    moveTypeCategory(index) {
      this.$refs.MKTypeCategory.moveTypeCategory(index);
    },
    moveLangCategory(index) {
      this.$refs.MKLangCategory.moveLangCategory(index);
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  //background-color: #444851;
  //background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.51' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  background: #25272d;
  height: 100%;
}
.body {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
}
.typeCategory {
  width: 18%;
  height: 100%;
}
.contentBox {
  width: 82%;
  height: 100%;
}
.langCategory {
  width: 100%;
  height: 14%;
}
.movieList {
  height: 82%;
  overflow-x: auto;
}
</style>
